<template>
    <div>
        <MyTitle title="班级管理"></MyTitle>
        <el-row class="mt10">
            <el-button type="primary" @click="addAction">添加班级</el-button>
        </el-row>

        <SearchTable @reset="resetList" @search="todoSearch">
            <template #default="{ sobj }">
                <el-form-item label="所属学科" prop="xueke">
                    <el-select v-model="sobj.xueke" size="middle" style="width:100%;" placeholder="请选择">
                        <el-option v-for="item in xuekeList" :key="item.id" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="班级年份" prop="year">
                    <el-select v-model="sobj.year" size="middle" style="width:100%;" placeholder="请选择">
                        <el-option v-for="item in years" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item label="班级编码" prop="num">
                    <el-select v-model="sobj.num" size="middle" style="width:100%;" placeholder="请选择">
                        <el-option v-for="item in 30" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
            </template>
        </SearchTable>

        <el-row class="mt10">
            <!-- 表格 -->
            <el-col :span="23">
                <el-table :data="banjiList" stripe style="width: 100%" center border :row-key="(item) => item._id">
                    <el-table-column type="index" label="序号" width="60" align="center" />

                    <el-table-column label="班级名称" width="auto" align="center">
                        <template #default="scope">
                            <span> {{ scope.row.label }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="班级编码" width="auto" align="center">
                        <template #default="scope">
                            <span> {{ scope.row.value }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="所属学科" width="auto" align="center">
                        <template #default="scope">
                            <span> {{ scope.row.xueke }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="班级年份" width="auto" align="center">
                        <template #default="scope">
                            <span> {{ scope.row.year }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="班级序号" width="auto" align="center">
                        <template #default="scope">
                            <span> {{ scope.row.num }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="添加时间" width="220" align="center">
                        <template #default="scope">
                            <span> {{ $filters.timeFormat(scope.row.time, 'YYYY-MM-DD hh:mm') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="auto" align="center" fixed="right">
                        <template #default="scope">
                            <el-popconfirm title="你确定要删除吗???" @confirm="ToDoDelete(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button link type="danger" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                            <el-button link type="primary" size="small"
                                @click="updateItem(scope.row, scope.$index)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagesize">
                </div>
            </el-col>
        </el-row>

        <DiaLogForm ref="diaRef" :btn="flag ? '添加' : '修改'" :title="flag ? '添加班级' : '修改班级'" :rules="rules"
            :type="flag ? 'primary' : 'success'" @todoconfirm="todoconfirm">
            <template #default="{ form }">
                <el-form-item label="所属学科" prop="xueke">
                    <el-select v-model="form.xueke" size="middle" style="width:100%;" placeholder="请选择">
                        <el-option v-for="item in xuekeList" :key="item.id" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="班级年份" prop="year">
                    <el-select v-model="form.year" size="middle" style="width:100%;" placeholder="请选择">
                        <el-option v-for="item in years" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item label="班级编码" prop="num">
                    <el-select v-model="form.num" size="middle" style="width:100%;" placeholder="请选择">
                        <el-option v-for="item in 30" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
            </template>
        </DiaLogForm>
    </div>
</template>   

<script lang="ts" setup >
import { reactive, ref, onMounted, toRefs, toRaw } from 'vue'
import { formRefType } from '../../utils/types';
import { Http } from '../../api/api';
import { useStore } from '../../store';

const store = useStore()
const state = reactive({
    years: [],
    banjiList: [],
    flag: true
})
const { getXuekeListAsync } = store;
const { xuekeList } = toRefs(store)
const { flag, years, banjiList } = toRefs(state)
const diaRef = ref<formRefType>()
const rules = reactive<any>({
    xueke: [
        { required: true, message: '请选择', trigger: 'blur' },
    ],
    year: [
        { required: true, message: '请选择', trigger: 'blur' },
    ],
    num: [
        { required: true, message: '请选择', trigger: 'blur' },
    ],
})

const addAction = () => {
    state.flag = true;
    diaRef.value.show = true;
}

const getClassList = async (payload?: any) => {
    let res = await Http.getclasslist(payload) as any;
    if (res.code == 200) {
        state.banjiList = res.result;
    }
}

const todoconfirm = async (data: any) => {

    if (state.flag) {
        let res = await Http.addclass(data) as any;
        if (res.code == 200) {
            getClassList()
            diaRef.value.handleClose()
        }


    } else {
        console.log(data)
        let res = await Http.updatexueke(data) as any;
        console.log(data)
        if (res.code == 200) {
            state.xuekeList = state.xuekeList.map((item: any) => {
                if (item._id == data._id) {
                    item = { ...toRaw(data) }
                }
                return item;
            })
            diaRef.value.handleClose()

        }
    }
}

const ToDoDelete = async (item: any, index: number) => {
    let res = await Http.deletexueke({
        _id: item._id
    }) as any;
    if (res.code == 200) {
        state.xuekeList.splice(index, 1)
    }
}

const updateItem = (item: any, index: number) => {
    state.flag = false;
    diaRef.value.show = true;
    diaRef.value.form = Object.assign({}, item)
}

const resetList = () => {
    getClassList()
}

const todoSearch = (data: any) => {
    getClassList(data)
}


onMounted(() => {
    getXuekeListAsync()
    const year = new Date().getFullYear()
    var list = []
    for (var i = -5; i < 5; i++) {
        list.push(year + i)
    }
    state.years = list;

    getClassList()
})


</script>
